<template>
    <div>
        <navTitle title="广告列表"></navTitle>
        <seartch :array="array" @searchValues="searchValues"></seartch>
        <dataList :datalisttitle="datalisttitle"></dataList>
        <div>
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" property="id" label="编号">
                </el-table-column>
                <el-table-column align="center" property="name" label="广告名称" />
                <el-table-column align="center" property="type" label="广告位置">
                    <template #default="scoped">
                        {{ scoped.row.type == 1 ? 'APP首页轮播' : 'PC轮播' }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="广告图片">
                    <template #default="scoped">
                        <img :src="scoped.row.pic" alt="" style="width: 80px">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="时间">
                    <template #default="scoped">
                        开始时间{{ dayjs(scoped.row.startTime).format("YYYY-MM-DD HH:mm:ss") }}
                        到期时间{{ dayjs(scoped.row.endTime).format("YYYY-MM-DD HH:mm:ss") }}
                    </template>
                </el-table-column>
                <el-table-column align="center" property="status" label="上线/下线">
                    <template #default="scoped">
                        <el-switch :value="scoped.row.status == 1"
                            @change="switchChange(scoped.row.status, scoped.row.id)" />
                    </template>
                </el-table-column>
                <el-table-column align="center" property="clickCount" label="点击次数" />
                <el-table-column align="center" property="orderCount" label="生产订单" />
                <el-table-column align="center" label="操作">
                    <template #default="scoped">
                        <button class="btn" @click="setState(scoped.row.id)">编辑</button>
                        <button class="btn" @click="deleteState(scoped.row.id)">刪除</button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div style="display: flex; align-items: center;">
            <el-select v-model="value" placeholder="批量操作" style="margin-top: 10px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" style="margin-top: 10px; margin-left: 10px;" @click="submit">确认</el-button>
        </div>
        <div style="display: flex; justify-content: flex-end; padding: 10px;">
            <el-pagination :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :default-page-size="5"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <el-button text></el-button>
    </div>
</template>

<script lang="ts" setup>
import navTitle from '@/components/_s_yingxiao/_s_NavTitle.vue'
import seartch from '@/components/_s_yingxiao/_s_Serch.vue'
import dataList from '@/components/_s_yingxiao/_s_DataList.vue'
import * as dayjs from 'dayjs'
import { flash } from '@/request/api'
import { ElTable } from 'element-plus'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
let array = [{ //传递给搜索列表的内容
    title: '广告名称',
    havelist: false,
    placeholder: '广告名称'
}, {
    title: '广告位置',
    placeholder: '全部',
    havelist: true,
    appNameList: [
        'PC首页轮播',
        'APP首页轮播',
    ]
},
{
    title: '到期时间',
    placeholder: '到期时间',
    havelist: false,
    timeend: true
}]
let datalisttitle = [  //传给数据列表的内容
    {
        val: '添加广告'
    }
]
// 分页数据内容
let pageSize = ref(5)
let pageNum = ref(1)
let endTime = ref('')
let name = ref('')
let type = ref(null)
let total = ref(0)
let tableData = ref([])
// 发送请求
function deleteAdvertise(id: Array<number>) { // 删除或者批量删除请求
    let newids = id.toString()
    flash.AdvertiseDelete(newids).then(res => {
        AX()
    })
}

function updateStatus(id: number, status: number | 1 | 0) {  //修改上下线状态
    flash.AdvertiseUpdateStatus({
        id: id,
        status: status
    }).then(res => {
        AX()
    })
}
function AX() {  //数据更新请求
    flash.AdvertiseList({
        pageSize: pageSize.value,
        pageNum: pageNum.value,
        type : type.value,
        name : name.value,
        endTime : endTime.value
    }).then((res: any) => {
        pageSize.value = res.pageSize
        pageNum.value = res.pageNum
        total.value = res.total
        tableData.value = res.list
    })
}
AX()
// 列表需要的数据
const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val: Array<any>) => {
    multipleSelection.value = val
    for (let i = 0; i < val.length; i++) {
        deleteids.value.push(val[i].id);
    }
}

// 滑块的事件
let switchChange = (val: number, id: number) => {
    // val是新值
    let newval = (val - 1) * -1
    updateStatus(id, newval)

}

// 批量内容
let value = ref('') //这是删除或是取消
let deleteids = ref([]) //这是删除的列表
const options = [{
    value: '删除',
    label: '删除'
}, {
    value: '取消',
    label: '取消'
}]
let submit = () => {
    if (value.value == '取消') {
        return
    }
    // deleteAdvertise(deleteids.value)
    open(deleteids.value, '删除')

}

// 按钮后面的独立内容
let setState = (id:number) => {
    // 点击修改内容 携带id跳转 
    router.push(`/sms/updateAdvertise?id=${id}`)
    
}

let deleteState = (e: number) => {
    // 删除内容
    open(e, '删除')
}
// 分页内容
let handleCurrentChange = (e: number) => {
    pageNum.value = e
    AX()
}
let handleSizeChange = (e: number) => {
    pageSize.value = e
    AX()
}
// 弹出层
const open = (e: any, msg: string) => {
    ElMessageBox.confirm(
        `确认要${msg}这条信息吗`,
        '确认框',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            if (msg == '删除') {
                deleteAdvertise([e])
            }
            ElMessage({
                type: 'success',
                message: `${msg}成功`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: `${msg}失败`,
            })
        })
}


// 搜索内容
let searchValues = (e)=>{
    name.value  =e[0]
    let newType = e[1] == 'PC首页轮播' ? 0 : ( e[1] == 'APP首页轮播' ? 1 : null)
    type.value = newType
    endTime.value = e[2]
    AX()
}
</script>
 
<style lang="scss" scoped>
.btn {
    color: rgb(64, 158, 255);
    border: none;
    background-color: transparent;
    cursor: pointer;
}
</style>